<template>

  <div>
    <div id="PromotionLimitMoney">
      <header>
        <img src="../assets/箭头.png" alt="" onclick="history.go(-1)">
        <p>提升临时额度</p>
        <img src="../assets/问题.png" alt="" @click="CommonProblem()">
      </header>
      <!--免材料-->
      <div class="AuditConditions">
        <div>
          <h2>免材料，秒审核</h2>
          <p>提额不通过，不收取信用评估费</p>
        </div>
        <img src="../assets/tieupbig.png" alt="">
      </div>
      <div class="AuditConditions_empt"></div>
      <div class="AuditConditions_kexuanedu">
        <h4>可选额度</h4>
        <ul>
          <li v-for='(item,index) in raise_config[0]' @click="changeColor(index)"
              v-bind:class='{changes:changeRed == index}'>￥<span @click="getQuickMoney(index)"
                                                                 ref="menuItem">{{item.amount}}</span></li>
          <!--<li>￥<span>1000</span></li>-->
          <!--<li>￥<span>2000</span></li>-->
          <!--<li class="tuijian"><img src="../assets/tuijian.png" alt=""><p><span>￥</span><span>2100</span></p></li>-->
        </ul>
        <div class="customMoney">
          <div @click="customMoneyClick()">
            <p>自定义额度</p>
            <p>￥<span>{{limits}}</span></p>
          </div>
        </div>
      </div>
      <div class="AuditConditions_youxiaoqi">
        <ul>
          <li><p>有效期</p><p><span>{{duration}}</span>天(至<span>{{expired_at}}</span>)</p></li>
          <li><p @click="CreditAssessmentFeeMark()"><span>信用评估费</span><img src="../assets/tip.png" alt=""></p>
            <p><span>￥</span><span>{{AssessmentFee}}</span></p></li>
        </ul>
      </div>
      <div class="AuditConditions_btn">
        <button @click="ImmediateMenion()">立即提额(支付￥<span ref="transAssessmentFee">{{AssessmentFee}}</span>)</button>
      </div>



      <div id="divs" v-show="customMoneyShow">

      <div class="customMoneyShow" >
        <p>请输入额度</p>
        <p>
          <input type="text" v-model="proveMoney" placeholder="100递增,不能超过您的最大可提额度" autofocus>
        </p>
        <ul>
          <li @click="removeM()">取消</li>
          <li @click="sureM()">确定</li>
        </ul>
      </div>

        <!--金额不能为空-->
        <div class="ShowWarn" v-show="ShowWarn">
          <p>提示</p>
          <p>金额不能为空</p>
          <p @click="emptySure()">确定</p>
        </div>


        <!--不能超过上限额度-->
        <div class="ShowWarn" v-show="coverLimit">
          <p>提示</p>
          <p>金额不能超过上限额度</p>
          <p @click="coverSure()">确定</p>
        </div>



        <!--取模运算-->
        <div class="ShowWarn" v-show="ShowWhole">
          <p>提示</p>
          <p>请输入整数金额，100递增</p>
          <p @click="ShowWholeClick()">确定</p>
        </div>



        <!--信用评估费-->
        <div class="ShowWarn" v-show="CreditAssessmentFee">
          <p>提示</p>
          <p style="line-height: 2rem;margin-top: -2rem">提升临时额度，需额外查询第三方信用数据以<br>便评估，为此我将收取提升额度的10%作为信<br>用评估费用</p>
          <p @click="AssessmentFeeMark()">确定</p>
        </div>

      </div>


    </div>

    <!--购买成功弹窗-->
    <div class="tishiAgree" v-show="tishiShow">
      <p style="width:60%;padding:0.5rem 0 0.5rem 0;background: rgba(0, 0, 0, 0.4);color: white">{{tishiInfor}}</p>
    </div>

  </div>

</template>

<script>

  import axios from 'axios'

  export default {

    name:'PromoteLimit',
    data() {
      return {
        PromoteLimitTocken:'',
        raise_amount:'',
        duration:'',
        expired_at:'',
        interest:'',
        raise_config:[],
        changeRed: 0,
        message:'',
        AssessmentFee:'',
        customMoneyShow:false,
        ShowWarn:false,
        limits:this.$route.query.raise_amount,
        proveMoney:'',
        ShowWhole:false,
        CreditAssessmentFee:false,
        coverLimit:false,
        transAssessmentFee:'',
        tishiShow:false,
        tishiInfor:'',
        order_id:'',
        time:1500
      }
    },
    created() {
      var that = this;
      console.log(that.$route.query.raise_amount);
      that.raise_amount=that.$route.query.raise_amount
      that.PromoteLimitTocken = sessionStorage.getItem('AuthToken');
      console.log(that.PromoteLimitTocken)
      axios.get('http://test.zjapi.xianxiangle.com/raise_show?AuthToken=' + that.PromoteLimitTocken).then(function (res) {
        console.log(res.data.data);
        that.duration=res.data.data.duration
        console.log(res.data.data.duration)
        that.expired_at=res.data.data.expired_at
        // console.log(res.data.data.expired_at)
        console.log(res.data.data.interest)
        that.interest=res.data.data.interest
        console.log(res.data.data.raise_config[0].amount);
        var defaultMoney=res.data.data.raise_config[0].amount
        that.AssessmentFee=defaultMoney*that.interest
        that.raise_config.push(res.data.data.raise_config);
      }).catch(function (err) {

      })
    },
    methods: {

      CommonProblem(){
        console.log(111);
        this.$router.push({path: '/CommonProblem'})
      },
      // 信用评估费
      CreditAssessmentFeeMark(){
        var that=this;
        that.customMoneyShow=true;
        that.CreditAssessmentFee=true
      },
      AssessmentFeeMark(){
        var that=this;
        that.customMoneyShow=false;
        that.CreditAssessmentFee=false
      },
      changeColor(index) {
        this.changeRed = index;
      },
      getQuickMoney(index) {
        var that=this;
        // 点击显示当前的金额
        console.log(that.$refs.menuItem[index].innerText);
        that.limits=that.$refs.menuItem[index].innerText

        var indexMoney=that.$refs.menuItem[index].innerText
       that.AssessmentFee=indexMoney*that.interest
      },

      // 立即提额
      ImmediateMenion() {
        var that=this;
        console.log('提额');
        axios.post('http://test.zjapi.xianxiangle.com/credit_apply',{
          AuthToken:that.PromoteLimitTocken,
          card_money:that.limits,   // [int]  临时额度
          price:that.AssessmentFee,         //[int]  评估费用
          duration:that.duration      //[int]  有效期
        }).then(function (res) {
          console.log(res.data);
          console.log(res.data.code);
          if(res.data.code==0){
            that.order_id=res.data.data.order_id
            console.log(res.data.data.order_id);
            that.tishiShow=true;
            that.tishiInfor =res.data.message;
            // this.tishikuang=false
            window.setTimeout(function() {
              that.tishiShow = false;
              that.$router.push({path: '/pay',query:{order_id:that.order_id}})
            }, that.time);
          }else {
            that.tishiShow=true;
            that.tishiInfor =res.data.message;
            window.setTimeout(function() {
              that.tishiShow = false;
            }, that.time);
          }
        }).catch(function () {

        })

      },

      // 自定义弹窗
      customMoneyClick(){
        // 弹窗显示
        this.customMoneyShow=true
        // console.log('自定义弹窗')
      },
      removeM(){
        // 弹窗隐藏
        this.customMoneyShow=false
      },

      ShowWholeClick(){
        var that=this;
        that.customMoneyShow=false;
        that.ShowWhole=false;

      },

      // 不能为空
      sureM(){
        var that=this;

        // that.customMoneyShow=false;
        if(that.proveMoney==''){
          that.ShowWarn=true;
        }else {
          if(that.proveMoney%100==0){
            that.limits=that.proveMoney;
            that.customMoneyShow=false;
            that.limits=that.limits
            console.log(that.$route.query.raise_amount)
            // console.log(that.proveMoney)
            console.log(that.limits);
            that.proveMoney='';
            if(that.limits>that.$route.query.raise_amount){
              that.customMoneyShow=true;
              that.coverLimit=true;
              that.limits=that.$route.query.raise_amount;
              that.AssessmentFee=that.limits*that.interest;
            }else {
              that.AssessmentFee=that.limits*that.interest;
              that.proveMoney='';
            }

          }else {
            // alert('额度是整数')
            that.ShowWhole=true;
            that.proveMoney='';
          }


        }
        // if(that.limits>=that.audit_limit){
        //
        //   that.limits=that.audit_limit
        // }else {
        //   that.limits=that.proveMoney
        // }

      },
      coverSure(){
        var that=this;
        that.customMoneyShow=false
        that.coverLimit=false;
      },
      emptySure(){
        this.ShowWarn=false;
        this.customMoneyShow=false;
      }
    },
//   components: {
//     AppHeader
//   }
  }
</script>

<style lang="scss" scoped>
  #divs{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    top: 0;
    .customMoneyShow{
      width: 86%;
      height:15rem;
      background: white;
      /*border: 1px solid red;*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 1rem;
      p{
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        padding: 1rem 0 1rem 0;
      }
      p :nth-child(2) {
        width: 100%;
        height: 2rem;
        border: 1px solid;
      }
      input{
        width: 90%;
        margin: auto;
        height: 2rem;
        border: 0;
        border-bottom: 2px solid #008800;
        font-size: 1.3rem;
        outline: none;
      }
      ul{
        width: 100%;
        height: auto;
        list-style: none;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        li{
          width: 50%;
          height: 2rem;
          line-height: 2rem;
          padding: 1rem 0 1rem 0;
          font-size: 1.3rem;
          color: #333333;
          text-align: center;
          border: 0;
        }
        li:nth-child(1){
          border-top: 1px solid #cccccc;
          border-right: 1px solid #cccccc;
          color: #528CE0;
        }
        li:nth-child(2){
          border-top: 1px solid #cccccc;
          color: #528CE0;
        }
      }
    }


    .tishiAgree {
      width: 100%;
      /*display: none;*/
      margin: auto;
      p {
        width: 50%;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0.3rem;
        color: white;
        padding: 0.5rem;
        text-align: center;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.6rem;
        margin: auto;
      }
    }



    /*提示金额不能为空*/
    .ShowWarn{
      width: 86%;
      height:15rem;
      background: white;
      /*border: 1px solid red;*/
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 1rem;
      p:nth-child(1){
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        padding: 1rem 0 1rem 0;
      }
      p:nth-child(2){
        font-size: 1.3rem;
        text-align: center;
        padding: 2rem 0 1rem 0;
      }
      p:nth-child(3){
        width: 100%;
        height: 2rem;
        line-height: 2rem;
        border-top: 1px solid #cccccc;
        font-size: 1.3rem;
        text-align: center;
        padding: 1rem 0 1rem 0;
        position: absolute;
        bottom: 0;
        left: 0;
        color: #528CE0;
      }

    }




  }

  #PromotionLimitMoney {
    width: 100%;
    height: auto;
    margin: auto;
    text-align: left;
  }
  header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 1rem 0 1rem 0;
    border-bottom: 1px solid #e3e3e3;

    img {
      width: 2rem;
      height: 2rem;
      display: inline-block;
      margin: 0;
      padding: 0;
    }
    img:nth-child(1){
      position: relative;
      left: 1rem;
    }
    img:nth-child(3){
      position: relative;
      right: 1rem;
    }
    p {
      font-size: 1.8rem;
      font-family: PingFangSC-Regular;
      color: #333333;
    }
  }

  .AuditConditions {
    width: 90%;
    height:auto;
    padding:1rem 0 1rem 0;
    background: #fff;
    display: flex;
    justify-content: space-around;
    h2{
      font-size: 2.1rem;
      color: #333333;
      padding-bottom: 0.4rem;
      /*padding-left: 1rem;*/
    }
    p{
      font-size: 1.3rem;
      color: #666666;
      /*padding-left: 1rem;*/
    }
    img {
      width: 8rem;
      height: 8rem;
    }
  }
  .AuditConditions_empt{
    width: 100%;
    height: 1rem;
    background: #eee;
  }

  .AuditConditions_kexuanedu {
    width: 100%;
    //height:28rem;
    //border: 1px solid;
    background: #fff;

    border-top: 1px solid #eee;
    h4 {
      font-size: 1.5rem;
      color: #333333;
      padding: 1.5rem 0px 1.5rem 1rem;
    }
    ul {
      width: 100%;
      //height:10rem;
      //border: 1px solid;
      list-style: none;
      /*overflow: hidden;*/
      li {
        width: 20%;
        height:4rem;
        float: left;
        line-height:4rem;
        font-size:1.3rem;
        color: #333333;
        border: 1px solid #A1A1A1;
        border-radius: 0.4rem;
        text-align: center;
        margin: 0.5rem 0px 0.5rem 1rem;
      }
      .changes {
        width: 20%;
        height:4rem;
        float: left;
        line-height:4rem;
        font-size:1.3rem;
        /*border: 1px solid #ccc;*/
        /*color: #999999;*/
        border-radius: 0.4rem;
        text-align: center;
        margin: 0.5rem 0px 0.5rem 1rem;
        color: #000;
        border: 1px solid #32D69C;
      }
      /*.tuijian{*/
        /*width: 20%;*/
        /*height:4rem;*/
        /*line-height:4rem;*/
        /*position: relative;*/
        /*overflow: hidden;*/
        /*img{*/
          /*width: 2.4rem;*/
          /*height: 1.2rem;*/
          /*position: absolute;*/
          /*left: 0;*/
          /*top: 0;*/
        /*}*/
        p{
          width: 20%;
          height:4rem;
          line-height:4rem;
          position: relative;
          right: 1rem;
          span{
            /*display: inline-block;*/
            /*border: 1px solid;*/
            font-size:1.3rem;
            color: #333333;
          }
        }

      }

    .customMoney {
      width: 90%;
      height: auto;
      float: left;
      /*border: 1px solid;*/
      overflow: hidden;
      position: relative;
      left: 1rem;
      div{
        width: auto;
        padding: 0.5rem;
        height: 4rem;
        border: 1px solid #A1A1A1;
        border-radius: 0.4rem;
        text-align: center;
        float: left;
        p{
          height: 2rem;
          line-height: 2rem;
        }
      }
    }
      .selected{
        color: #000;
        border: 1px solid #32D69C;
      }
      /*li:nth-last-child(1){*/
        /*line-height: 2rem;*/
        /*font-size: 1rem;*/
        /*p:nth-child(1){*/
          /*font-size: 1.4rem;*/
        /*}*/
        /*p:nth-child(2){*/
          /*color: #CCCCCC;*/
        /*}*/
      /*}*/


  }
  .AuditConditions_youxiaoqi{
    ul{
      width: 100%;
      list-style: none;
      text-align: left;
      li{
        width: 92%;
        height: auto;
        line-height:2rem;
        /*border: 1px solid;*/
        padding: 2rem 0 2rem 0;
      }
      li:nth-child(1){
        display: flex;
        justify-content: space-between;
        p{
          margin: 0;
          padding: 0;
        }
        p:nth-child(1){
          font-size: 1.5rem;
          /*padding-left: 1rem;*/
          text-align: left;
          color: #666666;
        }
        p:nth-child(2){
          font-size: 1.6rem;
          color: #333333;
          /*padding-right: 1rem;*/
        }
      }
      li:nth-child(2){
        display: flex;
        justify-content: space-between;
        p{
          margin: 0;
          padding: 0;
        }
        p:nth-child(1){
          /*padding-left: 1rem;*/
          font-size: 1.5rem;
          color: #666666;
          img{
            width: 1.6rem;
            height: 1.6rem;
            margin-left: 1rem;
            position: relative;
            top: 0.2rem;
          }
        }
        p:nth-child(2){
          font-size: 1.5rem;
          color: #333333;
          /*padding-right: 1rem;*/
        }
      }
    }
  }
  .AuditConditions_btn {
    width: 100%;
    position: absolute;
    bottom: 2rem;
    left: 0px;
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top:1rem;
    button {
      width: 90%;
      height:4rem;
      line-height:4rem;
      text-align: center;
      font-size:1.8rem;
      border-radius:5rem;
      background: #25DBAB;
      color: white;
      outline: none;
      border: 0;
    }
  }
</style>
